<template>
  <div class="contourLine">
    <div class="contourLine-top">
      <span>
       等高线分析
      </span>
      <el-popover
          class="contourLine-help"
          placement="top-end"
          title="帮助说明"
          width="250"
          trigger="click"
          content="点击'选择区域'后，鼠标左键在模型中绘制该分析区域的多个顶点，鼠标右键结束绘制区域，根据绘制顶点形成的区域自动分析结果">
        <el-button slot="reference"><i class="ri-question-line"></i></el-button>
      </el-popover>
    </div>
    <div class="contourLine-divider">
      <el-divider>
        <i class="ri-pencil-line"></i>
      </el-divider>
    </div>
    <div class="contourLine-data">
      <el-form ref="contourLineData" :model="contourLineObj" label-width="140px">
        <el-form-item label="是否显示等高面">
          <el-switch v-model="contourLineObj.isShowContourPlane"></el-switch>
        </el-form-item>
        <el-form-item label="等高面不透明度">
          <el-input-number v-model="contourLineObj.contourPlaneOpacity" :step="0.1" :max="1" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="是否显示等高线">
          <el-switch v-model="contourLineObj.isShowContourLine"></el-switch>
        </el-form-item>
        <el-form-item label="等高线颜色值" class="color">
          <el-color-picker :disabled="!contourLineObj.isShowContourLine" color-format="rgb"
                           v-model="contourLineObj.contourLineColor"></el-color-picker>
        </el-form-item>
        <el-form-item label="等高线的间距">
          <el-input-number :disabled="!contourLineObj.isShowContourLine" v-model="contourLineObj.contourLineSpacing"
                           :step="1" :max="100" :min="1"></el-input-number>
        </el-form-item>
        <el-form-item label="等高线最低可视">
          <el-input-number :disabled="!contourLineObj.isShowContourLine" v-model="contourLineObj.contourLineRangeMin"
                           :step="100" :max="0"
                           :min="-1000000"></el-input-number>
        </el-form-item>
        <el-form-item label="等高线最高可视">
          <el-input-number :disabled="!contourLineObj.isShowContourLine" v-model="contourLineObj.contourLineRangeMax"
                           :step="100" :max="1000000"
                           :min="1"></el-input-number>
        </el-form-item>
      </el-form>
    </div>
    <div class="contourLine-btn">
      <el-button @click="selectContourLine()">选择区域</el-button>
      <el-button @click="delContourLine()">删除</el-button>
      <el-button @click="closeContourLine()">关闭</el-button>
      <el-button @click="saveContourLine()">保存</el-button>
    </div>
  </div>
</template>
<style lang="scss">
@import '@/css/AnalysisTools/contourLine';
</style>
<script>
/* eslint-disable */

export default {
  name: "contourLine",
  data() {
    return {
      contourLineObj: {
        //是否显示等高面，{boolean}，默认值：true
        isShowContourPlane: true,
        //等高面颜色不透明度，仅当isShowContourPlane设置为true时生效，{number}，取值范围：[0~1]，默认值：1
        contourPlaneOpacity: 1,
        //是否显示等高线，{boolean}，默认值：true
        isShowContourLine: true,
        //等高线颜色值，仅当isShowContourLine设置为true时生效，{Color}，默认值：[1,1,1,1]
        contourLineColor: 'rgb(255,255,255)',
        //等高线的间距，仅当isShowContourLine设置为true时生效，{number}，单位：米，默认值：20米
        contourLineSpacing: 20,
        //等高线最大可视高度，{number}，单位：米，默认值：1000000米
        contourLineRangeMax: 1000000,
        //等高线最小可视高度，{number}，单位：米，默认值：-1000000米
        contourLineRangeMin: -1000000,
      },
    }
  },
  methods: {
    extractRGBComponents(colorString) {
      const rgbRegExp = /rgb\((\d+),\s*(\d+),\s*(\d+)\)/;
      const match = colorString.match(rgbRegExp);
      if (match) {
        return [parseInt(match[1]) / 255, parseInt(match[2]) / 255, parseInt(match[3]) / 255];
      } else {
        return null;
      }
    },
    selectContourLine() {
      let color = this.extractRGBComponents(this.contourLineObj.contourLineColor)
      let obj = {
        isShowContourPlane: this.contourLineObj.isShowContourPlane,
        contourPlaneOpacity: this.contourLineObj.contourPlaneOpacity,
        isShowContourLine: this.contourLineObj.isShowContourLine,
        contourLineColor: color,
        contourLineSpacing: this.contourLineObj.contourLineSpacing,
        contourLineRangeMax: this.contourLineObj.contourLineRangeMax,
        contourLineRangeMin: this.contourLineObj.contourLineRangeMin,
      }
      __g.tools.startContourLineAnalysis(obj);
    },
    delContourLine() {
      __g.tools.stopContourLineAnalysis();
    },
    closeContourLine() {
      this.$emit('close-popup');
      this.reloadContourLine()
    },
    reloadContourLine() {
      this.contourLineObj = {
        isShowContourPlane: true,
        contourPlaneOpacity: 1,
        isShowContourLine: true,
        contourLineColor: 'rgb(255,255,255)',
        contourLineSpacing: 20,
        contourLineRangeMax: 1000000,
        contourLineRangeMin: -1000000,
      }
    },
    saveContourLine() {
      this.$message.success("开发中")
    },
  },
  mounted() {

  },
  created() {

  },
  destroyed() {
    this.reloadContourLine()
  },
};
</script>